<template>
  <f7-page
    login-screen
    class="no-toolbar no-navbar no-swipeback"
  >
    <f7-row>
      <img
        class="center login-logo"
        src=""
      /></f7-row>
    <f7-block
      strong
      inset
      class="login-inset"
    >
      <f7-block class="login-msg">
        <span>用户注册</span>
      </f7-block>
      <f7-list
        form
        formStoreData
        id="form-login"
      >
        <f7-list no-hairlines-md>
          <f7-list-item>
            <f7-input
              type="text"
              placeholder="请输入账号"
              name="username"
              :value="username"
              @change="username = $event.target.value"
              clear-button
              autofocus
            ></f7-input>
          </f7-list-item>
          <f7-list-item>
            <f7-input
              type="password"
              placeholder="请输入密码"
              :value="password"
              @change="password = $event.target.value"
              clear-button
            ></f7-input>
          </f7-list-item>

          <f7-list-item>
            <f7-row no-gap>
              <f7-col width="80">
                <!-- <f7-icon f7="lock" slot="media"></f7-icon> -->
                <f7-input
                  type="text"
                  placeholder="请输入验证码"
                  :value="verifyCode"
                  @change="verifyCode = $event.target.value"
                  clear-button
                ></f7-input>
              </f7-col>
              <f7-col width="20">
                <img
                  class="vcode"
                  @click="getCode"
                  style="height:30px"
                />
              </f7-col>
            </f7-row>
          </f7-list-item>
        </f7-list>
      </f7-list>
      <f7-button
        @click="next()"
        class="button button-big btn-registerBtn"
      >下一步</f7-button>
      <f7-link
        href="/account/login/"
        class="item-link backLogin"
      >返回登录</f7-link>
    </f7-block>
  </f7-page>
</template>
<script>
export default {
  data() {
    return {
      username: null,
      password: null,
      verifyCode: null
    };
  },
  mounted() {
    this.getCode();
    window.plus.ai.ocr.init();
  },
  methods: {
    getCode() {
      this.$$("img.vcode").attr(
        "src",
        this.$framework.config.api.vcode + "?_r=" + this.$util.random()
      );
    },
    next() {
      if (!this.username) {
        this.$f7.dialog.alert("请填写帐号");
      } else if (!this.password) {
        this.$f7.dialog.alert("请填写密码");
      } else if (!this.verifyCode) {
        this.$f7.dialog.alert("请填写验证码");
      } else {
        this.$f7.preloader.show();
        this.$f7.request.postJSON(
          "/api/face/register/save",
          {
            model: {
              loginId: this.username,
              password: this.password,
              status: "DOING"
            },
            verifyCode: this.verifyCode,
            appCode: this.$f7.id || window.plus.runtime.appid
          },
          r => {
            this.$f7.preloader.hide();
            if (r && r.success) {
              this.$f7.views.current.router.navigate(
                "/account/idcard/?userId={0}&faceUserId={1}".format(
                  r.parameters.keys.userId,
                  r.parameters.faceUserId
                )
              );
            } else {
              this.getCode();
              this.$f7.dialog.alert(r.message || "注册失败，请稍后再试");
            }
          }
        );
      }
    }
  }
};
</script>
<style>
</style>
